«Чтобы попасть в IT, нужно обязательно уметь кодить» — это мнение ошибочно, многие профессии в айтишной сфере не требуют знания языков программирования. В статье расскажем всё о профессии веб-дизайнера.
Кто такой веб-дизайнер, и чем он занимается
Веб-дизайнер создает сайты, приложения и программы, которыми легко пользоваться. Делает так, чтобы человек за пару кликов нашел нужный товар в интернет-магазине, рассмотрел и заказал его. От графического дизайнера отличается тем, что работает не с полиграфией, иллюстрациями, логотипами, а с интерфейсом. Веб-дизайнер учитывает пользовательский опыт, главный критерий для него — удобство.
Обязанности веб-дизайнера зависят от компании и сферы, но в основном они такие:
👉 оформлять сайты — от лендингов до интернет-магазинов;
👉 разрабатывать элементы — баннеры, кнопки, анимацию;
👉 проектировать логику интерфейса — например, куда попадает пользователь при клике, когда появляется всплывающее окно;
👉 оформлять цифровые рекламные материалы — имейл-рассылки, баннеры для соцсетей;
👉 улучшать продукт по результатам А/B-тестов;
👉 адаптировать сайты под экраны смартфонов.
Направления веб-дизайна
🚀 UI
Это пользовательский интерфейс — то, как выглядит продукт. То есть всё, с чем взаимодействует человек на сайте или в приложении: от иконок до звуков или анимации. UI-дизайнер определяет, какого цвета сделать кнопку, нужны ли отступы, какой шрифт использовать для заголовка в интерфейсе.
🚀 UX
Это опыт пользователей — то, как с продуктом взаимодействуют. UX-дизайнер изучает потребности клиентов, продумывает компоновку, рисует прототипы, проводит тесты, готовит технические задания.
UX шире, чем UI. Если UI определяет цвет кнопки, то UX — в какую часть страницы ее поставить. Эти направления тесно связаны, поэтому часто ими занимается один и тот же человек.
🚀 Веб
Специалист проектирует структуру сайта или приложения. Определяет, как будет выглядеть продукт после верстки, передает разработчикам.
UX/UI-дизайнеры — узкие специалисты. Профиль веб-дизайнера шире. Он работает с UI, UX и выполняет функции графического дизайнера, бизнес-аналитика и верстальщика.
Зарплата веб-дизайнера
Специалисты получают в среднем 83 000 ₽ в месяц. Зарплата зависит от региона. Больше всего зарабатывают в Москве, Санкт-Петербурге, Екатеринбурге, Новосибирске, Казани. Еще на доход влияет направление, самый высокий — у продуктовых дизайнеров, узких специалистов: UI и UX.
Источник: хабр, второе полугодие 2022 года
Если работать на зарубежный рынок, то средняя зарплата веб-дизайнера в год будет больше — $57 000. Даже новички на старте получают $44 000.
Сколько зарабатывает веб-дизайнер на фрилансе
Доход зависит от компании и количества проектов. Можно вести несколько небольших или пару крупных — всё, как захочет фрилансер, и что найдет на рынке вакансий.
Статистика разная, так как разброс большой. Один специалист только осваивает профессию и подрабатывает: получает до 10 000 ₽. Другой уже с клиентской базой и серьезным портфолио: его зарплата будет в разы выше.
По данным университета Синергия, средний доход профессионалов на фрилансе составляет 100 000 ₽ в месяц. Это не значит, что фриланс всегда выгоднее, чем штат. В первом случае у дизайнера нет стабильности: в один месяц все заказчики могут свернуть проекты или же будет сложно найти новые.
Карьерная лестница веб-дизайнера
- Начинающий (junior, джуниор), опыт до года — рисует несложные веб-страницы и добавляет контент, часто обращается за помощью к наставнику;
- Специалист (middle, мидл), от года до трех лет — решает более сложные задачи, например самостоятельно разрабатывает прототип многостраничного сайта;
- Старший специалист (senior, сеньор), от трех лет — контролирует создание сайта от идеи до запуска, обучает команду.
Примеры вакансий разных карьерных ступеней с хедхантера
Требования
«Мягкие» навыки веб-дизайнера
Это личностные качества, которые помогают решать повседневные рабочие задачи и расти в карьере.
⚡️ Коммуникабельность. Дизайнер создает продукт не один, а в команде с верстальщиком, маркетологом, копирайтером. С ними нужно договариваться, предотвращать конфликты, объяснять позицию. Еще это качество помогает общаться даже с самым требовательным заказчиком.
⚡️ Эмпатия. Чувствует потребности пользователей, ставит себя на их место, предугадывает реакцию на готовый проект. Понимает, каким сайтом будет удобно пользоваться, а каким нет.
⚡️ Обучаемость. Следит за тенденциями, осваивает графические программы и другие инструменты. Находит способы, как быстрее и лучше решить задачу.
⚡️ Аналитические способности. Ничего не пускает на самотек и не делает наобум. Все решения принимает взвешенно, на основании опыта пользователей, — от цвета кнопки до размера картинки.
⚡️ Самоорганизованность. Делит проект на этапы, следит за тем, чтобы всё было готово к сроку. Особенно такое качество важно для фрилансеров: помогает справляться с соблазном отложить дела на завтра.
⚡️ Адаптивность к переменам. Команда может менять продукт по результатам исследования, а заказчик — вносить правки. Дизайнеру важно быстро корректировать план работы.
«Жесткие» навыки веб-дизайнера
К профессиональным навыкам относят владение графическими инструментами и базовые знания в дизайне и веб-разработке:
✅ Основы дизайна. Это виды, жанры, техники графики, использование фотографий и иллюстраций.
✅ Типографика. Нужна, чтобы правильно подбирать шрифт, кегль, регистр.
✅ Композиция. Специалист компонует картинки, текст, кнопки и другие элементы так, чтобы это было и удобно, и эстетично.
✅ Прототипирование. Для подготовки черновой версии продукта, чтобы потом презентовать, редактировать и согласовывать с заказчиком.
✅ Цветовой круг. Дизайнер знает, как разные цвета работают вместе, какие и когда сочетать.
✅ Frontend-разработка. Чтобы понимать, как макет превращают в рабочий продукт.
✅ Графические программы. Например, Adobe Illustrator, Photoshop. В прошлом году популярны были Sketch и Figma. Еще в списке инструменты для адаптивного веб-дизайна — проверять, как выглядят страницы на разных типах устройств.
Инструменты работы веб-дизайнера
Adobe Photoshop. Многофункциональный графический редактор. В основном его используют для работы с растровыми изображениями. Нужен, чтобы обрабатывать фото, создавать иллюстрации, прототипы, простые анимации.
Adobe Illustrator. Векторный графический редактор. Позволяет создавать логотипы, значки, упаковки, веб-графику и другое, переводить векторные рисунки в 3D-формат. Разные пользователи могут работать в одном проекте через облако.
Adobe XD. Программа для разработки прототипов интерфейсов и проработки пользовательских сценариев. Можно редактировать элементы, создавать стили, повторяющуюся сетку, интерактивные прототипы с анимацией, открывать файлы из других продуктов Adobe и Sketch. Удобно работать с командой.
Figma. Онлайн-сервис для разработки интерфейсов и прототипирования. Еще в Figma обрабатывают векторную и растровую графику, создают презентации, логотипы, иконки. Есть бесплатный тариф для Windows и MacOS.
Tilda. Блочный конструктор сайтов. Позволяет создавать интернет-магазины, посадочные страницы, блоги и email-рассылки. Можно создавать с нуля или использовать готовые блоки, при этом индивидуализировать их. В библиотеке более 550 вариантов.
Sketch. Векторный графический редактор для проектирования приложений и сайтов. Есть направляющие, сетки, символы, прототипирование, библиотеки, экспорт кода. А еще к нему есть масса плагинов и ресурсов. Работает только на Mac.
Программы можно освоить самостоятельно, но это непросто, уйдет много времени. Эффективнее, когда тебя учат эксперты. Figma, Tilda, Adobe Photoshop, Adobe Illustrator и другие программы вы освоите в онлайн-университете Skypro на курсе «Графический дизайнер».
Создадите свой первый лендинг, даже если никогда не умели работать в программах, научитесь создавать анимационные баннеры. Узнаете, как проводить аудит бренда и выстраивать свой. К концу курса соберете полноценное портфолио, а центр карьеры поможет найти работу.
Полезные ресурсы веб-дизайнер
Stylufy Me. Сервис для создания руководств по стилю сайта. Работает так: нужно вставить URL, а система выдаст список используемых шрифтов, цвета, изображения, размеры.
Adobe Color CC. Сервис для создания цветовых палитр.
365 Psd. Бесплатное хранилище. В базе иконки, фотографии, PSD, векторы, клипарты.
Iconbird. Русскоязычная поисковая система иконок. В базе их более 50 000. Можно скачивать наборы по тематикам.
CoolHue. Плагин с градиентами для Figma и Sketch. Более 60 готовых вариантов, которые создавали вручную.
Google Fonts. Библиотека более 800 свободно распространяемых шрифтов.
Unsplash. Бесплатный фотосток. В библиотеке более трёх миллионов фотографий, постоянно добавляют новые.
Midjourney. Система искусственного интеллекта, которая создает изображения на основе текстовых описаний.
Как стать веб-дизайнером с нуля
👨🎓 Где учиться
Вузы
В университетах по направлениям «дизайн и программирование», «графический дизайн», «дизайн» дают фундаментальные знания, прививают вкус, закладывают основы. Но «вышка» — это дорого. Например, учеба в НИУ ВШЭ в Москве стоит 750 000 ₽ в год. Зато получите диплом от лучшего российского вуза в категории «Искусство и дизайн» — по версии международного рейтинга QS-2021.
Онлайн-школы
Диплом государственного образца можно получить не только в классических вузах, но и в онлайн-школах и университетах. Курсы ведут эксперты-практики: погрузят в профессию, расскажут, как собрать портфолио и найти высокооплачиваемую работу. Плюс в том, что учиться можно в удобное время: совмещать с работой и личной жизнью. Информацию дают системно по модулям, при этом большое время уделяют практике.
📚 Что читать
«Веб-дизайн», Якоб Нильсен. Руководство, как взаимодействовать с пользователями: готовить контент, оформлять страницы, упрощать навигацию и создавать сайты. Книга отвечает на вопрос, что нужно сделать, чтобы клиентам было удобно.
«Эмоциональный веб-дизайн», Аарон Уолтер. О сайтах, которые вызывают положительные эмоции и притягивают клиентов.
«Не заставляйте меня думать», Стив Круг. Книга с примерами и иллюстрациями, советами, как избежать ошибок и создавать сервисы с пользой для клиента. Основы веб-дизайна и юзабилити — будет понятно и новичку.
📱На что подписаться в телеграме
«Веб-дизайн в Figma»: статьи, дизайн-системы, видеоуроки, плагины и сервисы.
«Веб-дизайнер на удаленке»: советы новичкам по шрифтам, иллюстрациям, интерфейсам и прототипам, коммуникации с заказчиками.
«UI/UX-дизайнер»: канал, чтобы тренировать насмотренность. Выкладывают по два варианта оформления, в комментариях обсуждают, какой правильный и почему.
Как собрать первое портфолио
📌 Создавайте свои проекты. Это особенно актуально для новичков, у которых еще нет реальных заказов. Проработайте разные задачи, чтобы у вас были не только обычные одностраничники, но и лендинги с интересной анимацией, интернет-магазины и прочее. Не просто добавляйте ссылки, а расписывайте кейс: запрос клиента, этапы работы, инструменты, ожидаемые и полученные результаты. Это покажет, что вы вникаете в суть, решаете бизнес-задачу, а не просто творите.
Работы можно разместить не только на своем сайте, но и на онлайн-сервисах. Например, Behance. Здесь создают портфолио фотографы, художники, дизайнеры, иллюстраторы. Получают обратную связь от других пользователей и оставляют свои комментарии, находят заказчиков, вдохновляются проектами.
📌 Участвуйте в конкурсах. Их размещают на профильных площадках вроде Dizkon.ru, на биржах фриланса по типу Freelance.ru. Даже если не выиграете, конкурсный проект можно оформить и добавить в портфолио.
📌 Актуализируйте портфолио. Добавляйте в него реальные заказы, учебные работы. Убирайте то, что делали на старте: оставляйте только лучшие работы, которые покажут ваши текущие навыки. Лучше оставить пять сильных проектов с подробным описанием задачи, чем дать ссылки на 50 посредственных.
Где веб-дизайнеру искать работу
Создайте резюме и портфолио. Не просто перечислите обязанности с прошлых мест и ссылки на проекты, а дайте емкие комментарии: в чём заключалась работа, чего достигли. Если опыта нет, напишите, где учились и какие навыки освоили, укажите учебные проекты.
Пример резюме после курса «Профессия веб-дизайнер» Skypro и Qmarketing Academy
Ищите клиентов на площадках:
В телеграм-каналах:
На сервисах по поиску работы:
На Geekjob.ru есть удобные фильтры не только по специализациям, но и по узким направлениям
Плюсы и минусы профессии веб-дизайнера
| Плюсы | Минусы |
|
|
Коротко: кто такой веб-дизайнер
- Веб-дизайнер оформляет и делает удобными сайты, приложения и программы. В зоне его ответственности — расположение элементов, цвета, шрифты, анимация и другие эффекты.
- Специалист должен уметь работать в графических программах, например Sketch и Figma. Разбираться в композиции, типографике, прототипировании.
- Важные качества веб-дизайнера: коммуникабельность и эмпатия, самоорганизованность, аналитические способности, обучаемость, адаптивность к переменам.
- Средняя зарплата — 83 000 ₽. На доход влияет опыт, регион, специализация.
- Учатся на веб-дизайнеров в вузах и на онлайн-курсах. Последний вариант дешевле и быстрее. Освоите инструменты с нуля, соберете проекты в портфолио и уже через три месяца начнете зарабатывать.
Добавить комментарий